<template>
    <div class="box">
        <div class="main">
            <h1>动态组件切换</h1>
            <button @click="current='AView'" class="tabs">A</button>
            <button @click="current='BView'" class="tabs">B</button>
            <component :is="current" class="show"></component>
        </div>
    </div>
</template>

<script>
    import AView from "./AView.vue"
    import BView from ".//BView.vue"

    export default {
        name: "App",
        data(){
          return {
              current : 'AView'
          }
        },
        components : {
           AView,BView
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box > .main {
        width: 600px;
        height: 500px;
        /*background: #dcbfa9;*/
    }

    .box > .main > .tabs {
        font-size: 20px;
        border: none;
        background: #2763d7;
        color: #fff;
        margin-right: 10px;
        padding: 5px 10px;
    }
    .box > .main > .show{
        margin-top: 20px;
    }
</style>